/**
 * 零售出库
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">基本资料</el-breadcrumb-item>
      <el-breadcrumb-item>客户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部筛选 -->
    <span class="el-input">
      名称：<el-input
        v-model="screen.number"
        placeholder="请输入名称查询"
        style="width: 220px; margin-top: 20px; margin-right: 30px"
      ></el-input>
      手机号码：<el-input
        v-model="screen.message"
        placeholder="请输入手机号码查询"
        style="width: 230px; margin-top: 20px; margin-right: 30px"
      ></el-input>
      联系电话：
      <el-input
        v-model="screen.message"
        placeholder="请输入联系电话查询"
        style="width: 230px; margin-top: 20px; margin-right: 30px"
      ></el-input>
      <!-- 单期据日：<el-date-picker
        v-model="screen.date"
        type="date"
        placeholder="请选择时间"
      ></el-date-picker> -->
      <el-button type="primary" style="margin-left: 20px">查询</el-button>
      <el-button style="margin-left: 5px">重置</el-button>
    </span>

    <!-- 添加点击 -->
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >导入</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable align="center" prop="shopId" label="名称">
      </el-table-column>
      <el-table-column sortable align="center" prop="shopping" label="联系人">
      </el-table-column>
      <el-table-column sortable align="center" prop="date" label="手机号码">
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="operator"
        label="联系电话"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="amount"
        label="期初应付"
      >
      </el-table-column>
      <el-table-column sortable align="center" prop="Collection" label="期末应付"></el-table-column>
      <el-table-column sortable align="center" prop="Collection" label="税率(%)"></el-table-column>
      <el-table-column sortable align="center" prop="Collection" label="状态"></el-table-column>

      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :current-page.sync="list.pageNum"
      :page-size="list.pageSize"
      :total="total"
    >
    </el-pagination> -->
    <!--添加 编辑界面 -->
    <el-dialog
      :title="isEdit ? '编辑' : '添加'"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="单据编号" prop="name">
          <el-input
            size="small"
            v-model="editForm.name"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型：">
          <el-select
            v-model="editForm.productType"
            placeholder="请选择产品类型"
          >
            <el-option
              v-for="item in brandOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="editForm.createTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改时间：">
          <el-date-picker
            v-model="editForm.updateTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品概述：">
          
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="handleDialogConfirm()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOut, save, deletes, update } from "../../api/good";

const defaultEditForm = {
  id: null,
  name: null,
  createTime: null,
  updateTime: null,
  productOverview: " ",
  shufflingFigure: null,
};
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      // total: "",
      // 表格
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      listData: [], //用户数据
      brandOptions: [],
      // 筛选对象传值
      screen: {
        number: "",
        message: "",
        date: "",
      },
    };
  },
  components: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },
  methods: {
    // 分页渲染
    handleSizeChange(val) {
      // this.list.pageNum = 1;
      // this.list.pageSize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(val);
      // this.list.pageNum = val;
      this.getdata();
    },
    // 获取查询出库列表
    getdata() {
      // this.loading = true;
      getOut(this.screen)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$message({
              type: "info",
              message: res.message,
            });
          } else {
            this.listData = res.result;
            // this.total = res.data.total;
            // this.list.pageNum = res.data.pages;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    // 添加
    handleAdd() {
      this.editFormVisible = true;
      this.isEdit = false;
      setTimeout(() => {
        this.editForm = Object.assign({}, defaultEditForm);
      }, 100);
      this.fileList = [];
      this.file = [];
      this.getBrandList();
    },
    getBrandList() {
      getProductCenter().then((response) => {
        this.brandOptions = [];
        let brandList = response.data;
        for (let i = 0; i < brandList.length; i++) {
          this.brandOptions.push({
            label: brandList[i].name,
            value: brandList[i].id,
          });
        }
      });
    },
    handleBrandChange(val) {
      let brandName = "";
      for (let i = 0; i < this.brandOptions.length; i++) {
        if (this.brandOptions[i].value === val) {
          brandName = this.brandOptions[i].label;
          break;
        }
      }
      this.editForm.productType = brandName;
    },
    //显示编辑界面
    handleUpdate(index, row) {
      this.editFormVisible = true;
      this.isEdit = true;
      this.getBrandList();
      getList(row.id).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "info",
            message: res.message,
          });
        } else {
          this.editForm = res.data;
          if (this.editForm.shufflingFigure.split(",").length >= 2) {
            let urlArray = this.editForm.shufflingFigure.split(",");
            let newUrlArray = urlArray.map((item, index) => {
              return {
                name: index,
                url: item,
              };
            });
            this.fileList = newUrlArray;
            this.file = this.editForm.shufflingFigure.split(",");
          } else {
            this.fileList = [
              { name: "xxx", url: this.editForm.shufflingFigure },
            ];
          }
        }
      });
    },

    // 编辑、增加页面保存方法
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          this.editForm.shufflingFigure = this.file;
          updateProduct(this.editForm).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              this.editFormVisible = false;
              this.loading = false;
              this.getdata();
            } else {
              this.$message({
                message: res.msg,
                type: "info",
              });
            }
          });
        } else {
          this.editForm.shufflingFigure = this.file;
          save(this.editForm).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
              this.getdata();
              this.editFormVisible = false;
              this.loading = false;
            } else {
              this.$message({
                message: res.msg,
                type: "info",
              });
            }
          });
        }
      });
    },
    // 删除
    deleteUser(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletes(row.id)
            .then((res) => {
              if (res.code == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>
<style >
.el-dialog {
  width: 40% !important;
}
.el-input--small .el-input__inner {
  width: 70%;
}
.bth {
  float: right;
  margin-top: -30px;
  margin-left: -30px;
}
</style>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 